<template>
  <div class="record-stats-container">
    <h2>出入库统计</h2>

    <div class="filter-bar">
      <el-select v-model="timeRange" placeholder="选择时间范围" @change="handleTimeRangeChange">
        <el-option label="今天" value="day"></el-option>
        <el-option label="本周" value="week"></el-option>
        <el-option label="本月" value="month"></el-option>
        <el-option label="今年" value="year"></el-option>
        <el-option label="自定义" value="custom"></el-option>
      </el-select>

      <el-date-picker
        v-if="timeRange === 'custom'"
        v-model="customDateRange"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        @change="handleCustomDateChange"
      />

      <el-button type="primary" :icon="IconSearch" @click="fetchRecordStats">查询</el-button>
    </div>

    <div v-loading="loading" class="stats-summary">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-card class="summary-card">
            <div class="card-title">入库总数</div>
            <div class="card-value">{{ statsData?.inboundTotal ?? 0 }} 条</div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card class="summary-card">
            <div class="card-title">入库总量</div>
            <div class="card-value">{{ statsData?.inboundQuantity ?? 0 }}</div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card class="summary-card">
            <div class="card-title">入库总金额</div>
            <div class="card-value">¥{{ (statsData?.inboundAmount ?? 0).toFixed(2) }}</div>
          </el-card>
        </el-col>
      </el-row>
      <el-row :gutter="20" style="margin-top: 20px;">
         <el-col :span="8">
          <el-card class="summary-card">
            <div class="card-title">出库总数</div>
            <div class="card-value">{{ statsData?.outboundTotal ?? 0 }} 条</div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card class="summary-card">
            <div class="card-title">出库总量</div>
            <div class="card-value">{{ statsData?.outboundQuantity ?? 0 }}</div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card class="summary-card">
            <div class="card-title">出库总金额</div>
            <div class="card-value">¥{{ (statsData?.outboundAmount ?? 0).toFixed(2) }}</div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <el-row :gutter="20" style="margin-top: 30px;">
      <el-col :span="12">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>入库排行榜</span>
            </div>
          </template>
          <el-table :data="statsData?.topInboundItems" style="width: 100%">
            <el-table-column prop="itemName" label="物品名称"></el-table-column>
            <el-table-column prop="quantity" label="入库数量" width="100"></el-table-column>
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="12">
         <el-card>
          <template #header>
            <div class="card-header">
              <span>出库排行榜</span>
            </div>
          </template>
          <el-table :data="statsData?.topOutboundItems" style="width: 100%">
            <el-table-column prop="itemName" label="物品名称"></el-table-column>
            <el-table-column prop="quantity" label="出库数量" width="100"></el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>

  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { Search as IconSearch } from '@element-plus/icons-vue'
import { getRecordStats } from '@/api/records'
import type { RecordStatsResponse, RecordStatsParams } from '@/api/records'

const statsData = ref<RecordStatsResponse | null>(null)
const loading = ref(false)
const timeRange = ref<RecordStatsParams['timeRange']>('month') // 默认选择本月
const customDateRange = ref<[Date, Date] | null>(null)

const fetchRecordStats = async () => {
  loading.value = true
  try {
    const params: RecordStatsParams = {
      timeRange: timeRange.value,
    }

    if (timeRange.value === 'custom' && customDateRange.value) {
       // 确保日期是后端需要的格式，这里简单示例为 YYYY-MM-DD
      params.startDate = customDateRange.value[0]?.toISOString().split('T')[0];
      params.endDate = customDateRange.value[1]?.toISOString().split('T')[0];
    }

    const res = await getRecordStats(params)
    statsData.value = res.data
  } catch (error) {
    ElMessage.error('获取统计数据失败')
    statsData.value = null
  } finally {
    loading.value = false
  }
}

const handleTimeRangeChange = (value: RecordStatsParams['timeRange']) => {
  if (value !== 'custom') {
    customDateRange.value = null; // 清除自定义日期范围
    fetchRecordStats(); // 选择非自定义范围时立即查询
  }
}

const handleCustomDateChange = () => {
   if (customDateRange.value && customDateRange.value.length === 2) {
     // 自定义日期范围选择后，点击查询按钮触发fetchRecordStats
     // 或者可以在这里直接触发，但通常更希望用户点击查询
   }
}

onMounted(() => {
  fetchRecordStats()
})
</script>

<style scoped>
.record-stats-container {
  padding: 20px;
}

.filter-bar {
  margin-bottom: 20px;
  display: flex;
  gap: 10px;
  align-items: center;
}

.stats-summary .el-card {
  text-align: center;
}

.summary-card .card-title {
  font-size: 14px;
  color: #909399;
  margin-bottom: 10px;
}

.summary-card .card-value {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
}

.card-header {
  font-size: 16px;
  font-weight: bold;
}

/* 可以添加更多样式来优化布局和外观 */
</style> 